<template>
  <div>
    <!-- loding -->
    <div class="loadings" v-show="isShow">
      <img src="../images/loading.gif">
    </div>
    <!-- 纯文字提示 -->
    <div class="phonePops" v-show="phonePopFlg">
      <div>{{datas}}</div>
    </div>
    <!-- 带图片提示 -->
    <div class="phonePopTwo" v-show="phonePopTwoFlg"> 
      <div class="div">
        <img :src="dataTwoSrc" alt="">
        <p>{{dataTwo}}</p>
        <p class="p2">{{datasP}}</p>
      </div>
    </div>
  </div>
</template>
<script type="text/babel">
  import '../js/flexible.debug.js'
  export default {
    data() {
      return {
        isShow: false,
        hasAnimate: true,
        phonePopFlg:false,
        phonePopTwoFlg:false,
        datas:"",
        dataTwo:"",
        dataTwoSrc:"",
        datasP:"",
      }
    },
    computed: {
      /**
       * 动画效果样式，没有返回空
       * @return {String} 样式
       */
      animateName() {
        return this.hasAnimate ? 'opacity' : ''
      },
    },
    methods: {
      /**
       * 显示动画loading
       */
      show() {
        this.isShow = true
      },
      showPop(datas){
        this.datas = datas;
        this.phonePopFlg =true;
      },
      hidePop(){
        this.phonePopFlg =false;
      },
      showPopTwo(datas,src,datasP){
        this.dataTwo = datas;
        this.datasP = datasP;
        this.dataTwoSrc = src;
        this.phonePopTwoFlg =true;
      },
      hidePopTwo(){
        this.phonePopTwoFlg =false;
      },
      /**
       * 隐藏动画loading
       */
      hide() {
        this.isShow = false
      },
    },
  }
</script>

<style lang="less" scope>

.loadings{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  background-color: rgba(255,255,255,0.7);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  img{
    width: 140px;
    height: 138px;
  }
}
.phonePops{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  background-color: rgba(255,255,255,0);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  div{
    padding: 0.27rem 0.4rem;
    font-size: 0.4rem;
    background: rgba(51,51,51,0.80);
    border-radius: 0.16rem;
    color:#fff;
  }
}
.phonePopTwo{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  background-color: rgba(255,255,255,0);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  .div{
    background: rgba(51,51,51,0.80);
    border-radius: 0.16rem;
    color:#fff;
    text-align: center;
    padding: 0.67rem 0.53rem;
    min-width: 4.05rem;
    img{
      width: 0.96rem;
      height: 0.96rem;
    }
    p{
      margin-top: 0.21rem;
      font-size: 0.37rem;
    }
    .p2{
      font-size: 0.32rem;
    }
  }
}
</style>